<script setup>
import { ref, reactive } from "vue"
import SwiperSlideDefaultTemplate from '@/components/SwiperSlideDefaultTemplate/index.vue'


let gridList = [
  {
    title:"企业协同",
    backgroundUrl:"	https://cdc-private.cdn-go.cn/cdc.tencent.com/latest/assets/0@2x.391df45d.png",
    list:[{
      title:"企业平台",
    },{
      title:"企业服务创新大会"
    },{
      title:"企业计费平台"
    }], // wrap上面显示的列表
    targetUrl:"www.baidu.com" , // 点击底部跳转链接
  },
  {
    title:"政务服务",
    backgroundUrl:"https://cdc-private.cdn-go.cn/cdc.tencent.com/latest/assets/1@2x.532d8a44.png",
    list:[{
      title:"粤省事小程序",
    },{
      title:"国务院小程序"
    },{
      title:"信用中国"
    },{
      title:"第七次人口普查"
    }], // wrap上面显示的列表
    targetUrl:"www.baidu.com" , // 点击底部跳转链接
  },
  {
    title:"技术公益",
    backgroundUrl:"	https://cdc-private.cdn-go.cn/cdc.tencent.com/latest/assets/2@2x.36ed7b1a.png",
    list:[{
      title:"99公益日",
    },{
      title:"腾讯公益系列研究"
    },{
      title:"银发青松助手"
    }], // wrap上面显示的列表
    targetUrl:"www.baidu.com" , // 点击底部跳转链接
  },{
    title:"智慧文旅",
    backgroundUrl:"	https://cdc-private.cdn-go.cn/cdc.tencent.com/latest/assets/3@2x.93d2ccdc.png",
    list:[{
      title:"云游敦煌小程序",
    },{
      title:" 一部手机游云南"
    },{
      title:"首钢园小程序"
    },{
      title:"中国文旅产业用户调研报告"
    }], // wrap上面显示的列表
    targetUrl:"www.baidu.com" , // 点击底部跳转链接
  },{
    title:"企业形象",
    backgroundUrl:"https://cdc-private.cdn-go.cn/cdc.tencent.com/latest/assets/4@2x.0e7b8a0d.png",
    list:[{
      title:"集团品牌",
    },{
      title:"字体设计"
    },{
      title:"IP怪奇物语"
    }], // wrap上面显示的列表
    targetUrl:"www.baidu.com" , // 点击底部跳转链接
  },{
    title:"科技金融",
    backgroundUrl:"	https://cdc-private.cdn-go.cn/cdc.tencent.com/latest/assets/5@2x.fa24f884.png",
    list:[{
      title:"微众银行",
    },{
      title:"微保"
    },{
      title:"微信支付大调研"
    },{
      title:"互联网保险年度报告"
    }], // wrap上面显示的列表
    targetUrl:"www.baidu.com" , // 点击底部跳转链接
  },{
    title:"大会展览",
    backgroundUrl:"https://cdc-private.cdn-go.cn/cdc.tencent.com/latest/assets/6@2x.2068f459.png",
    list:[{
      title:"腾讯we大会",
    },{
      title:"SICC服务创新大会"
    }], // wrap上面显示的列表
    targetUrl:"www.baidu.com" , // 点击底部跳转链接
  },{
    title:"在线教育",
    backgroundUrl:"https://cdc-private.cdn-go.cn/cdc.tencent.com/latest/assets/7@2x.8c71a2eb.png",
    list:[{
      title:"作业码小程序",
    }], // wrap上面显示的列表
    targetUrl:"www.baidu.com" , // 点击底部跳转链接
  },{
    title:"智慧零售",
    backgroundUrl:"https://cdc-private.cdn-go.cn/cdc.tencent.com/latest/assets/8@2x.f81e0356.png",
    list:[{
      title:"智慧零售小程序系列研究",
    },{
      title:"高端美妆消费白皮书"
    },{
      title:"下沉市场品牌消费调研"
    },{
      title:"K11购小程序"
    }], // wrap上面显示的列表
    targetUrl:"www.baidu.com" , // 点击底部跳转链接
  }
]

</script>
<template>
  <SwiperSlideDefaultTemplate>
    <div class="swiper-slide-tree">
      <div class="left-content">
        <div class="left-text">
          <div class="jc-m-b-48">
            <div class="banner-title">
              <h1 class="title">丰富的</h1>
            </div>
            <div class="banner-title flex-title">
              <div class="title">行业服务案例</div>
            </div>
          </div>
          <div class="banner-desc jc-m-b-88">
            <p>致力于提升产品的用户体验，探索</p>
            <p>护粮网生态体验创新</p>
          </div>
          <div class="banner-btn">
            <span>了解更多行业案例</span>
            <span class="jc-m-l-24 jc-btn">
              <i class="iconfont icon-bofang"></i>
            </span>
          </div>
        </div>
      </div>
      <div class="right-content">
        <div class="right-grid">
          <div class="grid-item" v-for="(gridItem) in gridList">
            <div class="grid-item-title jc-p-l-24 jc-p-t-24">
              {{ gridItem.title }}
              <div class="grid-item-slider jc-m-t-24"></div>
            </div>
            <div class="grid-mask-content">
              <ul class="grid-mask-top">
                <li class="top-item-title" v-for="(gridItemItem) in gridItem.list">{{ gridItemItem.title }}</li>
              </ul>
              <div class="grid-item-bottom">
                <div class="bottom-left">精选案例</div>
                <div class="bottom-right">-></div>
              </div>
            </div>
            <div class="right-bg" :style="{backgroundImage: `url(${gridItem.backgroundUrl})`}"></div>
          </div>
        </div>
      </div>
    </div>
  </SwiperSlideDefaultTemplate>
</template>
<style lang="scss" scoped>
.swiper-slide-tree {
  padding-top: var(--jc-header-height);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  .left-content {
    width: 50%;

    .left-text {
      .banner-title {
        .title {
          line-height: 80px;
          font-size: 56px;
          letter-spacing: 6px;
          font-weight: bold;
        }

        .fix {
          background-color: var(--jc-color-text-primary);
          width: 32px;
          height: 12px;
        }
      }

      .flex-title {
        display: flex;
        align-items: center;
      }

      .banner-desc {
        font-weight: 200;
        font-size: 16px;
        line-height: 30px;
        letter-spacing: 1px;
        opacity: .5;
      }
    }
  }

  .right-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    height: 100%;
    .right-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 874px;
      .grid-item {
        position: relative;
        overflow: hidden;
        width: calc(33.33333% - 10px);
        height: 241px;
        margin-top: 16px;
        margin-bottom: 0px;
        border: 1px solid #e4e3e3;
        border-radius: 4px;
        background-color: var(--jc-desc-page-color);
        .grid-item-title {
          opacity: .64;
          font-size: 24px;
          letter-spacing: 1;
        }
        .grid-item-slider {
          opacity: 1;
          background-color: #b3b3b3;
          // width: 18px;
          // height: 4px;
          width: 26px;
          height: 8px;
        }
        .right-bg {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 106px;
          height: 106px;
          text-align: right;
          background-repeat: no-repeat;
          background-size: 100%;
          // background-image: url('https://cdc-private.cdn-go.cn/cdc.tencent.com/latest/assets/2@2x.36ed7b1a.png');
        }
        &:hover .grid-mask-content {
          // opacity: 1;
          visibility: visible;
        }
        .grid-mask-content {
          display: flex;
          cursor: pointer;
          // opacity: 1;
          visibility: hidden;
          z-index: 33;
          transition: .1s all ease-out;
          position: absolute;
          right: 0;
          top: 0px;
          width: 100%;
          height: 100%;
          background-color: var(--jc-color-primary);
          color: var(--jc-color-text-primary);
          padding: 20px 16px 0px;
          font-size: 16px;
          letter-spacing: 1px;
          flex-direction: column;
          justify-content: space-between;
          .grid-mask-top {
            height: 96px;
            overflow: hidden;
            .top-item-title {
              font-size: 16px;
              height: 24px;
              line-height: 28px;
              letter-spacing: 1;
              list-style: disc;
              list-style-position: inside;
              opacity: .9;
              color: #fff;
            }
          }
          .grid-item-bottom {
            margin-top: 12px;
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #ececec;
          }
        }
      }
    }
  }
}
</style>
